<template>
  <view class="poster" :class="show ? 'show' : 'hide'">
    <view class="mask" @click="hide"></view>
    <view class="inner" @click.stop>
      <view class="content">
        <view class="title">长按图片保存海报</view>
        <view class="img-box"
          ><image :src="imgUrl" mode="widthFix"></image
        ></view>
      </view>
      <l-painter
        ref="painter"
        isCanvasToTempFilePath
        hidden
        @success="imgUrl = $event"
        v-if="!loading"
        css="width: 622rpx;background: #fff;border-radius: 16rpx;"
      >
        <l-painter-view css="background: #fff">
          <l-painter-view
            css="display:flex;align-items:center;padding:42rpx 0;"
          >
            <l-painter-view css="width: 418rpx; padding-left: 42rpx;">
              <l-painter-text
                :text="info.typeName"
                css="background:#98B3FF; padding: 8rpx 16rpx; border-radius: 8rpx;"
              />
              <l-painter-view
                css="display:flex;align-items:center;margin-top:16rpx"
              >
                <l-painter-text
                  :text="info.time"
                  css="font-size:24rpx;color:#999999;margin-right:20rpx;"
                />
                <l-painter-text
                  :text="`发布，${info.like_num}浏览`"
                  css="font-size:24rpx;color:#666666;"
                />
              </l-painter-view>
            </l-painter-view>
            <l-painter-view>
              <l-painter-view>
                <l-painter-image
                  :src="info.user.avatar"
                  css="width: 88rpx;height: 88rpx;border-radius: 50%;"
                />
              </l-painter-view>
              <l-painter-text
                :text="info.user.nickname"
                css="font-size:24rpx;color:#333333;margin-left:8rpx;display: block;margin-top:14rpx;line-clamp: 2; width:88rpx"
              />
            </l-painter-view>
          </l-painter-view>
        </l-painter-view>
        <l-painter-view
          css="color:#333333;margin-top:64rpx;margin-bottom: 16rpx;padding:0 42rpx"
        >
          <l-painter-text
            :text="info.title"
            css="font-size:32rpx;color:#333333;"
          />
        </l-painter-view>
        <l-painter-view
          css="background:#1747CD;padding:66prx 42rpx;display:flex;align-items:center;justify-content: space-between;"
        >
          <l-painter-view css="width: 436rpx;">
            <l-painter-text
              text="人人聚本地便民通"
              css="font-size:32rpx;color:#fff;text-align: left;"
            />
            <l-painter-view css="width: 436rpx;margin-top: 18rpx;">
              <l-painter-text
                text="发便民信息、求职招聘、租房子、查电话、找好店、抢优惠。"
                css="font-size:24rpx;color:#fff;line-clamp: 2;width: 362rpx;"
              />
            </l-painter-view>
          </l-painter-view>
          <l-painter-view css="padding: 24rpx 0;">
            <view
              css="width: 142rpx; height: 142rpx;background: #fff;padding: 4rpx"
            >
              <l-painter-image
                :src="`https://adminshop.12sxb.cn/${info.qrcode}`"
                css="width: 134rpx; height: 134rpx;"
              />
            </view>
            <l-painter-text
              text="长按查看详情"
              css="font-size:24rpx;color:#fff;display: block;margin-top:8rpx;"
            />
          </l-painter-view>
        </l-painter-view>
      </l-painter>
      <view class="btns">
        <view class="btn" @click="handleSave">保存</view>
        <button class="btn" open-type="share">分享到朋友圈</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  model: {
    prop: "show",
    event: "input",
  },
  data() {
    return {
      imgType: "jpg",
      imgUrl: "",
      loading: false,
    };
  },
  methods: {
    hide() {
      console.log("hide");
      this.$emit("hide", false);
    },
    onShareAppMessage() {
      this.$refs.painter.canvasToTempFilePathSync({
        fileType: "jpg",
        // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
        pathType: "url",
        quality: 1,
        success: (res) => {
          return {
            title: this.info.title,
            path: "/pages/local/detail?id=" + this.info.id,
            imageUrl: res.tempFilePath,
          };
        },
      });
    },
    onShareTimeline() {
      this.$refs.painter.canvasToTempFilePathSync({
        fileType: "jpg",
        // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
        pathType: "url",
        quality: 1,
        success: (res) => {
          return {
            title: this.info.title,
            path: "/pages/local/detail?id=" + this.info.id,
            imageUrl: res.tempFilePath,
          };
        },
      });
    },
    handleSave() {
      // 生成图片
      this.$refs.painter.canvasToTempFilePathSync({
        fileType: "jpg",
        // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
        pathType: "url",
        quality: 1,
        success: (res) => {
          console.log(res.tempFilePath);
          // 非H5 保存到相册
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function () {
              console.log("save success");
              uni.showToast({
                title: "保存成功",
                icon: "success",
              });
            },
          });
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.poster {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &.show {
    display: flex;
    animation: show 0.3s ease-in-out;
  }
  @keyframes show {
    0% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(1);
    }
  }

  &.hide {
    display: none;
    animation: hide 0.3s ease-in-out;
  }
  @keyframes hide {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  .inner {
    width: 80%;
    position: relative;
  }
  .content {
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
  }
  .title {
    background: #eaf2ff;
    font-size: 32rpx;
    text-align: center;
    color: #0c4cff;
    line-height: 96rpx;
  }
  .img-box {
    background: #1747cd;
  }
  .btns {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    bottom: -158rpx;
    .btn {
      width: 272rpx;
      height: 88rpx;
      background: #3156ff;
      box-shadow: 0rpx 0rpx 51rpx 0rpx rgba(239, 242, 255, 0.45);
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 44rpx;
      &:last-child {
        background: #ffffff;
        box-shadow: 0rpx 0rpx 51rpx 0rpx rgba(239, 242, 255, 0.45);
        color: #03d96b;
      }
    }
  }
}
</style>
